import React from "react"
import { View, StyleSheet, Pressable, Text } from "react-native"
import { colors, spacing, typography } from "app/theme"

import { MaterialIcons, Entypo, Feather, MaterialCommunityIcons } from "@expo/vector-icons"
import { scale } from "react-native-size-matters"
import { format, parse } from "date-fns"
import { statusColor } from "app/constants/statusColor"
import { navigate } from "app/navigators"

const Appointment = ({ item }) => {
  // console.log("item", JSON.stringify(item, null, 2))
  const date = new Date(item?.start_date * 1000)
  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

  return (
    <View style={styles.container}>
      <View style={[styles.top, { backgroundColor: statusColor[item?.status] }]}>
        <View style={styles.topLeft}>
          <Text style={styles.date}>
            {months[date.getMonth()] + " "}
            {date.getDate() + ", "}
            {date.getFullYear()}
          </Text>
          <Text style={styles.date2}>
            {format(parse(item?.start_time, "HH:mm:ss", new Date()), "HH:mm")}
            {"-"}
            {format(parse(item?.end_time, "HH:mm:ss", new Date()), "HH:mm")}
          </Text>
        </View>
        <Pressable
          onPress={() =>
            //@ts-ignore
            navigate("EditAddAppointment", {id:item?.id})
          }
        >
          <View style={styles.editButton}>
            <MaterialIcons name="edit" size={20} color={"black"} />
          </View>
        </Pressable>
      </View>

      <View style={styles.footer}>
        <View style={styles.info}>
          <Entypo name="location-pin" size={20} color="black" />
          <Text style={styles.infoText}>
            {item?.booking ? item?.booking?.location?.name : item?.provider_location?.address}
          </Text>
        </View>
        <View style={styles.info}>
          <MaterialCommunityIcons name="book-outline" size={20} color="black" />
          <Text style={styles.infoText}>
            {item?.booking ? item?.booking?.room?.name : item?.provider_location?.address}
          </Text>
        </View>
        <View style={styles.info}>
          <Feather name="user" size={20} color="black" />
          <View>
            {item?.clients?.map((item, index) => {
              return (
                <Text key={index} style={styles.infoText}>
                  {item?.first_name + " " + item?.last_name}
                </Text>
              )
            })}
          </View>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: colors.grey,
    borderRadius: 10,
    overflow: "hidden",
  },
  top: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  topLeft: {
    flex: 1,
  },
  date: {
    fontSize: scale(12),
    color: colors.black,
    fontFamily: typography.fonts.spaceGrotesk.semiBold,
  },
  date2: {
    fontSize: scale(12),
    color: colors.black,
    fontFamily: typography.fonts.spaceGrotesk.semiBold,
    marginTop: scale(2),
  },
  footer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "white",
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.xs,
    justifyContent: "space-between",
  },
  editButton: {
    height: 40,
    width: 40,
    backgroundColor: "white",
    borderRadius: 20,
    justifyContent: "center",
    alignItems: "center",
  },
  info: {
    flexDirection: "row",
    alignItems: "center",
  },
  infoText: {
    fontSize: 12,
    fontFamily: typography?.fonts?.spaceGrotesk?.normal,
    color: colors.textDim,
    marginLeft: 1,
    width: scale(75),
    textAlign: "left",
  },
})

export default Appointment
